<template>
    <div class="house_page">
        <div class="code_list">
            <div class="code_item flex" v-for="item in codeList" :key="item.id" @click="toDetail(item)">
                <div class="cover_img">
                    <image :src="item.coverImg" mode="aspectFit" />
                </div>
                <div class="detail">
                    <p class="code_name fs28 fw-bold">{{item.codeName}}</p>
                    <p class="code_name fs28">{{item.codeTitle}}</p>

                    <div class="flex-1"></div>
                    <div class="btns">
                        <span @click.stop="showCode(item)">二维码</span>
                        <span @click.stop="setImgAlbum(item)">图册</span>
                        <span @click.stop="setArticle(item)">正文</span>
                        <span @click.stop="delCodeItem(item)">删除</span>
                    </div>
                </div>
            </div>
            <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        </div>

        <div class="add_code" @click="$navigate.to('/pages/admin/house/editCode')" >+新增二维码</div>
        <!-- <scroll-view class="list_container" @scrolltolower="onInfinite" scroll-y> </scroll-view> -->


        <pub-lo-popup 
            title="二维码" 
            ref="shareCodeRef" 
            type="center" 
            :showBtn="false">
            <div class="invite_code h500 flex-center">
                <div class="code w400 h400">
                    <image class="wfull hfull" :src="shareCode" mode="" />
                </div>
            </div>
        </pub-lo-popup>
    </div>
</template>

<script>
import { createQRcode } from '@/utils/draw'
import { getUserImgs, getUserShareCode, editUserShareCode } from '@/request/house'
export default {
    name: "",
    components: {},
    data() {
        return {
            actTypeId: '',
            typeList: [],
            
            codeList: [],
            scroll: {
                page: 1,
                size: 14,
                loading: false,
                max: false,
                noData: false,
            },
            shareCode: ''
        }
    },
    onReachBottom() {
        this.onInfinite()
    },
    onLoad() {
        this.onRefresh()
    },
    methods: {
        getCodeList(complete) {
            getUserShareCode({
                fileType: '00', //00 图片 ， 01视频
                houseGroupId: this.actTypeId,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                if(this.scroll.page == 1) {
                    this.codeList = res.data.list
                } else {
                    this.codeList = this.codeList.concat(res.data.list)
                }
                this.scroll.max = this.codeList.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getCodeList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getCodeList(() => {
                this.scroll.loading = false
            })
        },
        toDetail(item) {
            this.$navigate.to('/pages/admin/house/editCode?id=' + item.id )
        },

        setImgAlbum(item) {
            this.$navigate.to('/pages/admin/house/codeImgs?codeId=' + item.id)
        },
        setArticle(item) {
            this.$navigate.to('/pages/admin/house/articleList?codeId=' + item.id)
        },

        
        async showCode(item) {
            let imgsRes = await getUserImgs({ 
                fromId: item.id,
                typeKind: '01', 
                fileType: '00',
                pageIndex: 1, 
                pageSize: 1 
            })
            let imgsTotal = +imgsRes.data.total
            if(imgsTotal < item.imgCnt) return this.$interact.toast('您的图册图片不足' + item.imgCnt + '张，请到图册添加图片')

            let path = location.origin + '/pages/house/index?codeId=' + item.id
            this.shareCode = await createQRcode(path)
            this.$refs.shareCodeRef.open()  
        },
        async delCodeItem(item) {

            let action = await this.$interact.modal({
                title: '提示',
                content: '确定删除？',
                showCancel: true
            })
            if(!action.confirm) return;
            editUserShareCode({
                id: item.id,
                delStatus: '01'
            }).then(res => {
                this.$interact.toast(res.msg)
                this.onRefresh()
            })

        }
    
    }
}
</script>
<style lang="less" scoped>
    .house_page{
        width: 100%;
        height: 100%;
        background: #fff;
        .code_list{
            width: 100%;
            .code_item{
                width: 100%;
                min-height: 150rpx;
                border-bottom: 1px solid #eee;
                padding: 20rpx;
                background: #fff;
                .cover_img{
                    width: 130rpx;
                    height: 130rpx;
                    image{
                        width: 100%;
                        height: 100%;
                        background: #eee;
                    }
                }
                .detail {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    padding-left: 20rpx;
                    .code_name{
                        .overflow(2);
                    }
                    .btns{
                        margin-top: auto;
                        display: flex;
                        justify-content: flex-end;
                        span{
                            margin-left: 15rpx;
                            font-size: 26rpx;   
                            &:nth-child(1){
                                color: #1a4eb7;
                            }
                            &:nth-child(2){
                                color: @mainColor;
                            }
                            &:nth-child(3){
                                color: #0ba531;
                            }
                            &:nth-child(4){
                                color: red;
                            }
                        }
                    }
                    
                }


            }

        }
        .add_code{
            width: 400rpx;
            height: 70rpx;
            font-size: 30rpx;
            border-radius: 70rpx;
            line-height: 70rpx;
            text-align: center;
            margin: 20rpx auto;
            background: @mainColor;
            color: #fff;
            position: sticky;
            bottom: 20rpx;
        }

    }
</style>